<template>
  <div>
    <el-container>
      <el-header style="background-color: #2c70c1;">
        <el-container style="height:100%">
          <el-aside style="display:flex;justify-content:flex-start;align-items:center;height:100%;width:300px">
            <span style="font-size:25px;color:#fff;margin-left:20px;">新职通机构端</span>
          </el-aside>
          <el-main style="display:flex;justify-content:flex-end;align-items:center;height:100%;width:300px">
            <!-- <i class="iconfont icontouxiang" style="font-size:25px;color:#fff;margin-right:10px;"></i> -->
            <el-avatar size="medium" :src="organInfo.logo" style="font-size:25px;margin-right:10px;"></el-avatar>
            <el-dropdown style="margin-right:20px;">
              <span class="el-dropdown-link">
                {{organInfo.shortname}}
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <div @click="goToVIP">
                    <i class="iconfont iconhuiyuanzhongxin" style="color:#E6A23C"></i>会员中心
                  </div>
                </el-dropdown-item>
                <el-dropdown-item>
                  <div @click="editCode">
                    <i class="el-icon-user" style="color:#409EFF"></i>修改密码
                  </div>
                </el-dropdown-item>
                <el-dropdown-item>
                  <div @click="exitResure">
                    <i class="iconfont icontuichudenglu" style="color:#F56C6C"></i>退出登录
                  </div>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-main>
        </el-container>
        <div
          class
          style="height:100%;width:99%;display:flex;justify-content:flex-end;align-items:center"
        ></div>
        <el-dialog title="修改密码" :visible.sync="editBox" width="500px">
          <div class="imgCol">
            <div style="width:400px">
              <el-form :model="form" status-icon :rules="rules" ref="form">
                <el-form-item prop="oldCode">
                  <el-input v-model="form.oldCode" placeholder="请输入旧密码..." show-password>
                    <i slot="suffix" class="iconfont icon3"></i>
                  </el-input>
                </el-form-item>
                <el-form-item prop="newCode">
                  <el-input v-model="form.newCode" placeholder="请输入新密码..." show-password>
                    <i slot="suffix" class="iconfont icon3"></i>
                  </el-input>
                </el-form-item>
                <el-form-item prop="reCode">
                  <el-input v-model="form.reCode" placeholder="请确认新密码..." show-password>
                    <i slot="suffix" class="iconfont icon3"></i>
                  </el-input>
                </el-form-item>
                <el-form-item prop="yzm">
                  <div style="position:static">
                    <el-input
                      v-model="form.yzm"
                      placeholder="验证码..."
                      class="yzmInput"
                      id="yzmInputId"
                      style="width:300px"
                    >
                      <i slot="suffix" class="iconfont iconverify"></i>
                    </el-input>
                    <div style="position:absolute;top:0px;left:310px">
                      <identify></identify>
                    </div>
                  </div>
                </el-form-item>
              </el-form>
            </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="cancleEdit">取 消</el-button>
            <el-button type="primary" @click="submitEdit">提交</el-button>
          </span>
        </el-dialog>
      </el-header>
      <el-container>
        <el-aside style="width:200px;text-align: center;">
          <el-menu :default-active="$route.path" id="homeMenu" router background-color>
            <el-menu-item index="/home/recent">
              <i class="iconfont icon1" style="font-size:30px"></i>
              <span slot="title" style="font-size:15px">登录首页</span>
            </el-menu-item>
            <br />

            <el-submenu index="2">
              <template slot="title">
                <i class="iconfont iconpeixun" style="font-size:30px"></i>
                <span style="font-size:15px">培训管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/home/checkTrain">
                  <span slot="title">查看培训</span>
                </el-menu-item>
                <!-- <el-menu-item index="2-3">
                                        <span slot="title">培训详情</span>
                </el-menu-item>-->
                <!-- <el-menu-item index="/home/addTrain">
                                        <span slot="title">新增培训</span>
                </el-menu-item>-->
                <el-menu-item @click="goToAdd">
                  <span slot="title">新增培训</span>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <br />

            <el-submenu index="3">
              <template slot="title">
                <i class="iconfont iconxiaoxi" style="font-size:30px"></i>
                <span style="font-size:15px">消息管理</span>
              </template>
              <el-menu-item-group>
                <!-- <el-menu-item index="/home/userNews">
                                        <el-badge  class="item">
                                            <el-button style="border:none">用户消息</el-button>
                                        </el-badge>
                </el-menu-item>-->
                <el-menu-item index="/home/systemNews">
                  <el-badge :value="newNews" class="item">
                    <span>系统消息</span>
                  </el-badge>
                </el-menu-item>
                <el-menu-item index="/home/newsBack">
                  <span slot="title">消息反馈</span>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <br />
          </el-menu>
        </el-aside>
        <el-main style="background-color: #F1F1F1;">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
export default {
  data() {
    //校验两次密码一致
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请确认密码"));
      } else if (this.form.newCode !== this.form.reCode) {
        console.log(this.form.newCode);
        console.log(this.form.reCode);
        console.log(value);
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    //校验验证码正确
    var validateYzm = (rule, value, callback) => {
      var yzm = sessionStorage.getItem("identify");
      console.log(yzm);
      console.log(value);
      if (value === "") {
        callback(new Error("请输入验证码"));
      } else if (value !== yzm) {
        callback(new Error("验证码输入错误！"));
      } else {
        callback();
      }
    };
    return {
      isCollapse: false,
      //新的系统消息
      newNews: "",
      organInfo: {
        shortname: "",
        logo:"",
      },
      editBox: false,
      form: {
        newCode: "",
        oldCode: "",
        reCode: "",
        yzm: ""
      },
      rules: {
        newCode: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          }
        ],
        oldCode: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          }
        ],
        reCode: [
          {
            validator: validatePass,
            trigger: "blur"
          }
        ],
        yzm: [
          {
            validator: validateYzm,
            trigger: "blur"
          }
        ]
      }
    };
  },
  mounted() {
    var body = document.getElementById("homeMenu");
    var height = document.documentElement.clientHeight - 120;
    body.style.height = height + "px";
    console.log(height);

    this.getOrganInfo();
    this.getNewNews();
  },
  methods: {
    //获取机构信息
    getOrganInfo() {
      var URL = this.IP + "/organUserInfo/trainOrganUserInfo";
      console.log(URL);
      this.$ajax({
        method: "get",
        url: URL
      })
        .then(response => {
          console.log('机构信息：',response.data);
          var code = response.data.code;
          if (code == 0) {
            this.organInfo = response.data.data;
          } else {
            console.log(response.data.msg);
          }
        })
        .catch(error => {
          console.log(error);
          //Toast(error);
        });
    },
    //获取新消息数量
    getNewNews() {
      var URL = this.IP + "/message/numberOfSystemMessages";
      console.log(URL);
      this.$ajax({
        method: "get",
        url: URL
      })
        .then(response => {
          console.log(response.data);
          var code = response.data.code;
          if (code == 0) {
            this.newNews = response.data.data;
          } else {
            console.log(response.data.msg);
          }
        })
        .catch(error => {
          console.log(error);
          //Toast(error);
        });
    },
    goToAdd() {
      var URL = this.IP + "/train/trainSaved";
      console.log(URL);
      this.$ajax({
        method: "get",
        url: URL
      })
        .then(response => {
          console.log(response.data);
          var code = response.data.code;
          var data = response.data.data;
          if (code == 0) {
            this.$confirm("上次还有未完成的编辑，是否继续？", "提示", {
              confirmButtonText: "继续",
              cancelButtonText: "不了，重新编辑",
              type: "warning"
            })
              .then(() => {
                //save==1表示继续上次的编辑
                this.$router.push({
                  path: "/home/addTrain",
                  query: {
                    save: 1
                  }
                });
              })
              .catch(() => {
                this.$router.push({
                  path: "/home/addTrain",
                  query: {
                    save: 0
                  }
                });
              });
          } else {
            this.$router.push({
              path: "/home/addTrain",
              query: {
                save: 0
              }
            });
          }
        })
        .catch(error => {
          console.log(error);
          //Toast(error);
        });
    },
    goToVIP() {
      this.$confirm("此功能正在开发中，敬请期待！", "提示", {
        confirmButtonText: "确定",
        type: "warning"
      });
    },
    editCode() {
      this.editBox = true;
    },
    //退出确认窗口
    exitResure() {
      this.$confirm("确定要退出登录吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.exit();
        })
        .catch(() => {});
    },
    //退出登录
    exit() {
      var URL = this.IP + "/user/logout";
      console.log(URL);
      this.$ajax({
        method: "post",
        url: URL
      })
        .then(response => {
          console.log(response.data);
          var code = response.data.code;
          if (code == 0) {
            this.$message({
              message: response.data.data,
              type: "success"
            });
            setTimeout(() => {
              this.$router.push({
                path: "/"
              });
            }, 2000);
          } else {
            this.$message({
              message: response.data.msg,
              type: "error"
            });
          }
        })
        .catch(error => {
          console.log(error);
          //Toast(error);
        });
    },
    submitEdit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          console.log("修改ok");
          var URL = this.IP + "/user/resetPasswordByOldOne";
          console.log(URL);
          this.$ajax({
            method: "post",
            url: URL,
            data: {
              oldOne: this.form.oldCode,
              newOne: this.form.newCode
            }
          })
            .then(response => {
              console.log(response.data);
              var code = response.data.code;
              if (code == 0) {
                this.$message({
                  message: response.data.data,
                  type: "success"
                });
                setTimeout(() => {
                  this.$router.push({
                    path: "/"
                  });
                }, 2000);
              } else {
                console.log(response.data.msg);
                this.$message.error(response.data.msg);
              }
            })
            .catch(error => {
              console.log(error);
              //Toast(error);
            });
        } else {
          console.log("error submit!!");
        }
      });
    },
    cancleEdit() {
      this.form.oldCode = "";
      this.form.newCode = "";
      this.form.yzm = "";
      this.form.reCode = "";
      this.editBox = false;
    }
  }
};
</script>
<style>
.yzmInput .el-input__inner {
  width: 300px;
}
.el-header,
.el-main,
.el-footer,
.el-aside {
  padding: 0px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #fff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.imgCol {
  display: flex;
  justify-content: center;
  align-items: center;
}
.pointer {
  cursor: pointer;
}
</style>
